<template>
  <div class="container">
    <el-dialog title="新增目录" :visible="showDialog" :width="dialogWidth" @close="close">
      <el-form ref="dirData" :model="fromData" :rules="rules" label-width="80px">
        <el-form-item prop="directoryName" label="目录名称">
          <el-input v-model="fromData.directoryName" placeholder="请输入目录名称" size="mini" />
        </el-form-item>
        <el-form-item>
          <el-select v-show="selectTag" v-model="fromData.subjectID" style="width:280px" placeholder="请选择" size="mini">
            <el-option v-for="(obj,index) in simpleData" :key="index" :label="obj.label" :value="obj.value" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-row type="flex" align="middle" justify="end" style="margin-top: 10px;margin-bottom: -20px;">
            <el-button size="mini" type="primary" @click="btnOK">确定</el-button>
            <el-button size="mini" @click="close">取消</el-button>
          </el-row>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { add as addDir, detail as detailDir, update as dirUpdateList } from '@/api/hmmm/directorys.js'
import { simple as simpleDir } from '@/api/hmmm/subjects.js'
export default {
  name: 'DirAd',
  props: {
    showDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dialogWidth: '400px', // 设置弹窗宽度
      // 定义参数
      fromData: {
        directoryName: '',
        subjectID: +this.$route.query.id
      },
      // 规则
      rules: {
        directoryName: [{ required: true, message: '请输入目录名称', trigger: 'blur' }],
        subjectID: [{ required: true, message: '请选择所学学科', trigger: 'blur' }]
      },
      // 所属学科
      simpleData: [],
      selectTag: false
    }
  },
  created() {
    this.simpleDir()
  },
  methods: {
    // 添加所属学科
    // 确定添加
    btnOK() {
      this.$refs.dirData.validate(async isOK => {
        if (isOK) {
          if (this.fromData.id) {
            await dirUpdateList(this.fromData)
            this.$message.success('修改成功')
          } else {
            await addDir(this.fromData)
            this.$message.success('添加成功')
          }
          this.close()
          this.$emit('direDataTan')
        }
      })
    },
    // 获取学科列表
    async simpleDir() {
      const { data } = await simpleDir()
      this.simpleData = data
    },
    // 清除数据
    close() {
      this.$emit('update:showDialog', false)
      this.$refs.dirData.resetFields()
      this.fromData.directoryName = ''
      this.fromData.subjectID = +this.$route.query.id
    },
    // 获取数据详情
    async detailDirTan(id) {
      const { data } = await detailDir(id)
      this.fromData = data
    }
  }
}
</script>

<style scoped lang="scss"></style>
